<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                >批量删除
                </el-button>
                <el-input v-model="keyword" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="danger" icon="el-icon-search" @click="hadleAdd">新增</el-button>
            </div>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <!--        数据显示区域        -->
                <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="sex"
                    label="性别"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="age"
                    label="年龄">
                </el-table-column>
                <el-table-column
                    prop="studentId"
                    label="学号">
                </el-table-column>
                <el-table-column
                    prop="tel"
                    label="电话">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="地址">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <!--  scope.$index 索引  row 当前行数据                   -->
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total,sizes,prev, pager, next,jumper"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[5,10,15,20]"
                    :total="total"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <!--     :visible.sync值为false就是关闭  为true就是弹出   -->
        <el-dialog :title="title" :visible.sync="addAndEditVisible" width="30%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="用户名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.sex"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age"></el-input>
                </el-form-item>
                <el-form-item label="学号">
                    <el-input v-model="form.studentId"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.tel"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addAndEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrEdit">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: 'student',
    data() {
        return {
            //弹框的标题
            title: '',
            //查询的参数
            currentPage: 1,
            pageSize: 10,
            keyword: '',
            total: 0,
            tableData: [],
            //多选框数据
            multipleSelection: [],
            delList: [],
            //新增和修改的弹框
            addAndEditVisible: false,

            form: {}

        };
    },
    created() {
        this.getPageData();
    },
    methods: {
        //分页查询
        getPageData() {
            console.log(this.currentPage);
            console.log(this.pageSize);
            this.$http.post('/student/pageQuery', {
                // 键 :值
                currentPage: this.currentPage,
                pageSize: this.pageSize,
                keyword: this.keyword
            }).then((res => {
                //给表格赋值
                this.tableData = res.data.data;
                //给total赋值
                this.total = res.data.total;
                console.log(res);
            }));
        },
        // 获取数据
        getData() {
            this.$http.get('/student').then((res) => {
                console.log(res);

            });
        },
        // 触发搜索按钮
        handleSearch() {
            this.currentPage = 1;
            this.getPageData();
        },
        // 分页导航
        handlePageChange(val) {
            //val  就是当前的页码
            console.log(val);
            //给当前页赋值
            this.currentPage = val;
            this.getPageData();

        },
        handleSizeChange(val) {
            console.log(val);
            this.currentPage = 1;
            this.pageSize = val;
            //再查询一次
            this.getPageData();
        },

        // 删除操作
        handleDelete(index, row) {
            //得到了id
            //console.log(row.id)
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$http.delete('/student/' + row.id).then((res) => {
                        console.log(res);
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //重新加载页面
                            this.getPageData();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '系统错误,请联系管理员!'
                            });
                        }
                    });
                });

        },
        // 多选操作
        handleSelectionChange(val) {
            console.log(val);
            //给变量赋值
            this.multipleSelection = val;
        },
        //批量删除
        delAllSelection() {
            //得到选中的数据集合
            //console.log(this.multipleSelection)
            //得到id的集合
            //循环遍历id放入集合
            var ids = this.multipleSelection.map(item => item.id);
            //console.log(ids)
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$http.post('/student/batchDelete', ids).then((res) => {
                        console.log(res);
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '批量删除成功!'
                            });
                            //重新加载页面
                            this.getPageData();
                        } else {
                            this.$message({
                                type: 'error',
                                message: '系统错误,请联系管理员!'
                            });
                        }
                    });
                });

        },
        //调用新增或是修改
        saveOrEdit() {//form数据中有id就执行修改  没有执行新增
            if (this.form.id) {
                this.edit();
            } else {
                this.save();
            }
        },
        // 编辑操作
        handleEdit(index, row) {
            this.title = '修改';
            console.log(index);
            console.log(row);//当前行数据
            //数据回显
            this.form = row;
            //打开弹框
            this.addAndEditVisible = true;
        },
        //保存修改
        edit() {
            //console.log(this.editForm)
            this.$http.put('/student', this.form).then((res) => {
                console.log(res);
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    //关闭弹框
                    this.addAndEditVisible = false;
                    //重新加载
                    this.getPageData();
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            });
        },
        //处理新增
        hadleAdd() {
            //清空数据
            this.form = {};
            this.title = '新增学生';
            //弹框
            this.addAndEditVisible = true;
        },
        // 保存新增
        save() {
            //查看表单数据
            console.log(this.form);
            //发送请求
            this.$http.post('/student', this.form).then((res) => {
                console.log(res);
                if (res.data.code === 200) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    // 关闭弹框
                    this.addAndEditVisible = false;
                    //重新加载页面
                    this.getPageData();
                } else {
                    this.$message({
                        message: '新增失败',
                        type: 'error'
                    });
                }
            });


            /*      this.editVisible = false;
                  this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                  this.$set(this.tableData, this.idx, this.form);*/
        }

    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
